<template>
    <div>
         <el-table ref="multipleTableRef" 
            :header-cell-style="{color:'#2A62BC'}"
            :data="tableData"   
            style="width: 100%;" 
            border
            stripe 
            @selection-change="handleSelectionChange">
            <el-table-column   type="selection" width="35" />
            <el-table-column  prop="student_number" label="学号"  align="center"></el-table-column>
            <el-table-column prop="student_name" label="姓名" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" align="center"></el-table-column>
            <el-table-column prop="phone" label="手机" align="center"></el-table-column>
            <el-table-column prop="email" label="邮箱" align="center"></el-table-column>
            <el-table-column prop="effective_date" label="有效日期" align="center"></el-table-column>
            <el-table-column prop="effective_status" label="启用" align="center"></el-table-column>
            <el-table-column label="评价" width="100" align="center" >
                        <template #default="scope">
                            <el-row class="right-btn">
                                <el-tooltip content="详情" placement="bottom" effect="light">
                                <el-button  :icon="Edit"   @click="editD(scope.row)"></el-button>
                            </el-tooltip>
                            </el-row>
                            <!-- </el-button-group> -->
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
            <div class="pagination">
                    <el-pagination
                    :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :page-sizes="[5, 10, 15, 20]"
                        :small="small"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal"
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange"/>
                </div>
                <!-- 评价弹窗 -->
                <el-dialog title="评价" v-model="editVisible" width="20%" >
                    <el-form label-width="80px">
                        <el-form-item label="学生姓名:" disabled >
                            <el-input v-model="form.student_name"  disabled></el-input>
                        </el-form-item>
                        <el-form-item label="评价内容:">
                            <el-input v-model="form.content"  type="textarea"></el-input>
                        </el-form-item>
                       
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="editVisible = false">关闭</el-button>
                            <el-button color="#2388c5" @click="saveEdit">确 定</el-button>
                        </span>
                    </template>
		</el-dialog>
                
        </div>
    </template>
    
    <script setup lang="ts">
    import { ref, reactive } from 'vue';
    import { ElMessage, ElMessageBox } from 'element-plus';
    import { Delete, Edit, Search, CaretBottom } from '@element-plus/icons-vue';
    import { getStuEvaluate } from '../../../api/teaching' ;
         
    //分页字体
    const small = ref(true)
    // const size = ref<'default' | 'large' | 'small'>('default')
    
    //分页数据
    const query = reactive({
        pageIndex: 1,
        pageSize: 5,
    });
    //表格数据
    const tableData = ref();
    //总页数
    const pageTotal = ref(0);
    const multipleTableRef = ref()
    const state = reactive({
        multipleSelection:[]
    })
    
    // 获取表格数据  分页是数据截取  后台结合一起后  直接返回分页的后的数据
    const getData = () => {
        getStuEvaluate({pageCurrent:query.pageIndex,pageSize:query.pageSize}).then(res=>{
            console.log(res,"---res---")
            // tableData.value = res.data.
            let start  = (query.pageIndex-1)*query.pageSize;//开始位置
            let end =query.pageIndex*query.pageSize  ;//结束位置 数组的截取的时候 [start,end) suo所以不用-1
            tableData.value = res.data.slice(start,end);
            // tableData.value = res.data;
            pageTotal.value = res.data.length
        })
       
        
    };
    getData();
    //多选框权限
    const handleSelectionChange = (val) => {
      state.multipleSelection = val
    }
    // 分页导航
    const handleSizeChange = (val) => {
      // console.log(`${val} items per page`)
      query.pageSize = val;
      getData()
    }
    const handlePageChange = (val) => {
        query.pageIndex = val;
        console.log(val,"==")
        console.log(query.pageSize)
        getData()
    };
    
    // 删除单个操作
    const handleDelete = (index) => {
        // 二次确认删除
        ElMessageBox.confirm('确定要删除吗？', '提示', {
            type: 'warning'
        })
        .then(() => {
            ElMessage.success('删除成功');
            //to 传递id 到后台 
            tableData.value.splice(index, 1);
            // 删除成功后
            // getData()
        })
        .catch(() => {});
    };
    //删除多个数据  to......
    const handleAllDelete =()=>{
        // console.log('删除多个')
        console.log(state.multipleSelection,'===拿到所有选择的数据====')
        if (state.multipleSelection.length==0) {
            ElMessage.error('请选择项')
            return
          }
        // console.log(state.multipleSelection.map(item=>item.id))
        //axios删除的操作
        // deleteAllAdmin({ids:state.multipleSelection.map(item=>item.id)})
    
        
    }
    
    
    // 查询操作  to... 需要自己实现与后台交互
    const handleSearch = () => {
        query.pageIndex = 1;
        getData();
    };
//批改作业弹框
const  form = reactive({
    id: '',
    student_name: '',
    content:''
})
const editVisible = ref(false)
const editD =(row)=>{
    form.student_name = row.student_name
    form.content=row.content
    editVisible.value= true
}

//保存修改的信息 
const saveEdit = ()=>{
    //,,,to
}

const value = ref()

const data = [
  {
    value: 'id',
    label: 'id',
  },
  {
    value: '作业标题',
    label: '作业标题',
  },
  {
    value: '作业内容',
    label: '作业内容',
  },
  {
    value: '布置时间',
    label: '布置时间',
  },
  {
    value: '学生答案',
    label: '学生答案',
  },
  
  {
    value: '学生姓名',
    label: '学生姓名',
  },
  
  {
    value: '写作时间',
    label: '写作时间',
  },
  {
    value: '操作',
    label: '操作',
  },
  
]



</script >
<style lang="less" scoped>
    .handle-box {
        margin-bottom: 20px;   
        .handle-btn{
            margin-left: 8px;
        }    
    }
    .handle-input {
        width:200px;
       padding: 6px;
    }
    .label{
       display: inline-block;
       max-width:100%;
       margin: 5px;
       font-weight: 100; 
       color: #676a6c;
       
    }
    .top-btn{
        float: right;
        .el-button{
            margin-left: 5px;
        }
    }
    .right-btn{
         justify-content:center;
        .el-button{
            height: 22px;
            // width: 60px;
            margin-right: 10px;
            padding: 1px 5px;
        }
    }
    
    
    </style>